<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>绑定手机号</title>
    <link rel="stylesheet" href="{{asset('css/common.css')}}">
    <script src="{{asset('ExternalJs/jquery-2.2.4.min.js')}}"></script>
    <script src="{{asset('js/conmon.js')}}"></script>
    <style>
        #ceilPhone,#code{
            width:100%;
            padding:0 2.67%;
            box-sizing:border-box;
            margin-top: 70px;
            font-size: 0.9rem;
        }
        #code{
            margin-top: 40px;
        }
        #ceilPhone input{
            width:100%;
            border:2px solid #E6E6E6;
            height:90px;
            outline: none;
            font-size: 0.9rem;
            box-sizing: border-box;
            padding-left:5%;
        }
        #code input{
            width:69.79%;
            float:left;
            border:2px solid #E6E6E6;
            height:90px;
            outline: none;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            font-size: 1rem;
            box-sizing: border-box;
            padding-left:5%;
        }
        #code section{
            width:31.38%;
            border:2px solid #E6E6E6;
            height:90px;
            text-align: center;
            box-sizing: border-box;
            padding-top:23px;
            background-color: #46A3DB;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            color:#FFF;
            position:relative;
            left:69.79%;
            top:0;
        }
        #code section p{
            position: relative;
            top:-66px;
        }
        button{
            width:94.66%;
            margin-left: 2.67%;
            box-sizing:border-box;
            margin-top: 140px;
            height:90px;
            background-color: #46A3DB;
            color:#FFF;
            font-size: 0.9rem;
            outline: none;
            border:none;
            border-radius: 10px;
            letter-spacing: 0.25rem;
        }
    </style>
</head>

<body>
<form action="user" method="post">
    {{csrf_field()}}
    @if(session('msg'))
        <p style="color:red; text-align: center; margin-top: 2%;">{{session('msg')}}</p>
    @endif
    <input type="hidden" name="post_code" id="post_code">
    <section id="ceilPhone"><input id="PhoneNumber" name="mobile" placeholder="手机号"></section>
    <section id="code"><input placeholder="验证码" name="code"><section><p onclick="settime(this)">获取验证码</p></section></section>
    <button id="bind" type="submit">绑定</button>
</form>
<script type="text/javascript">

    //60秒重新发送
    var countdown=60;
    function settime(obj) {
    if (countdown == 0) {
        obj.removeAttribute("disabled");
        obj.innerHTML="获取验证码";
        return;
    } else {
        obj.setAttribute("disabled", true);
        obj.innerHTML="重新发送(" + countdown + ")";
        countdown--;
    }
    setTimeout(function() {
            settime(obj) }
        ,1000)
    }
     $("#code p").click(function(){
     	var PhoneNumber = $('#PhoneNumber').val();
	    $.post(commonval+"/sendTelMsValCode ",{
            tel:PhoneNumber,
            type:'api_wechat_bind',
            device:"wap"
        },function(data){
            var msgData = data.data;
            if(data.status == 1){
            	createWindow('信息发送成功');
                $('#post_code').val(msgData['code']);
                function createWindow(msg) {
                    var window =$("<section class='showMsg'></section>");
                    var show = "<p>"+msg+"</p>";
                    window.append(show);
                    $("body").append(window);
                    setTimeout("$('.showMsg').remove()",3000);
                }
            }
        });
     })
</script>
</body>
</html>